<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .uploadImgBtn {
            width: 100px;
            height: 100px;
            cursor: pointer;
            position: relative;
            background: url("./imgs/chaoshi@3x.png") no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
        }
        
        .uploadImgBtn .uploadImg {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        
        .pic {
            width: 100px;
            height: 100px;
        }
        
        .pic img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="uploadImgBtn" id="uploadImgBtn">
        <input class="uploadImg" type="file" name="file" multiple id="file">
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        //为外面的盒子绑定一个点击事件
        $("#uploadImgBtn").click(function() {
            /*
            1、先获取input标签
            2、给input标签绑定change事件
            3、把图片回显
             */
            //            1、先回去input标签
            var $input = $("#file");
            console.log($input)
                //            2、给input标签绑定change事件
            $input.on("change", function() {
                console.log(this) //点击上传的选项框
                    //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
                    //获取选择图片的个数
                var files = this.files;
                var length = files.length;
                console.log("选择了" + length + "张图片");
                //3、回显
                $.each(files, function(key, value) {
                    // 必须上传图片，其他类型不支持!
                    if (!/image\/\w+/.test(value.type)) {
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    //每次都只会遍历一个图片数据
                    var div = document.createElement("div"),
                        img = document.createElement("img");
                    div.className = "pic";
                    // console.log(value.type);
                    var fr = new FileReader();
                    console.log(fr);
                    fr.onload = function() {
                        // console.log(this.result);
                        img.src = this.result;
                        div.appendChild(img);
                        document.body.appendChild(div);
                    }
                    fr.readAsDataURL(value);
                })

            })

            //4、我们把当前input标签的id属性remove
            $input.removeAttr("id");
            //我们做个标记，再class中再添加一个类名就叫test
            var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
            $(this).append($(newInput));

        })

    })
</script>

</html>